<template>
  <div class="table-section">
    <!-- 表格表头 -->
    <div class="table-th">
      <a-row>
        <a-col v-for="(th, index) in tableTh" :key="index" :span="th.width">
          <span>{{ th.title }}</span>
        </a-col>
      </a-row>
    </div>
    <!-- 表格内容 -->
    <div class="table-body">
      <template v-if="listData.length">
        <a-row v-for="(scope, index) in listData" :key="index">
          <!-- 表格row数据 -->
          <div class="row-top">
            <a-col v-for="(th, thIndex) in tableTh" :key="thIndex" :span="th.width">
              <template v-if="th.key == 'name'">
                <a-row :gutter="20">
                  <a-col span="5">
                    <img
                      :src="scope.pic || 'https://cyy-desc.oss-cn-beijing.aliyuncs.com/sp210329_163447.png'"
                      style="height: 80px; border-radius: 5px"
                    />
                  </a-col>
                  <a-col span="19">
                    <a-tooltip>
                      <template slot="title">
                        {{ scope.name }}
                      </template>
                      <div class="over_e">{{ scope.name }}</div>
                    </a-tooltip>
                    <div v-if="scope.order_type == 0">{{ scope.attr_list.map((el) => el.attr_name).join() }}</div>
                  </a-col>
                </a-row>
              </template>
              <template v-if="th.key == 'delivery_type'">
                {{ scope.delivery_type == 1 ? '门店自提' : (scope.delivery_type == 2 ? '同城配送' : '快递配送') }}
              </template>
              <span v-if="!th.scopedSlots">{{ scope[th.key] }}</span>
            </a-col>
          </div>
          <!-- 自定义表单内容 -->
          <div class="form-box" v-if="scope.form.length > 0">
            <div class="form-title">自定义表单</div>
            <div class="form-item" v-for="(form,formIndex) in scope.form" :key="formIndex">
              <span>{{form.key}}</span>
              <span>{{form.value}}</span>
            </div>
          </div>
          <!-- 表单每行底部信息 -->
          <div class="row-down">
            <a-row
              class="row_footer"
              :style="orderDetails.seller_comments || orderDetails.remark ? { lineHeight: '30px' } : {}"
              v-if="scope.delivery_type == 1"
            >
              <a-col span="20">
                联系人：{{ orderDetails.nickname }}<span style="margin: 0 10px">/</span>联系电话：{{
                  orderDetails.mobile
                }}<span style="margin: 0 10px">/</span>核销员：{{ orderDetails.clerk_name
                }}<span style="margin: 0 10px">/</span>门店名称：{{ orderDetails.md_info.name
                }}<span style="margin: 0 10px">/</span>门店地址：{{ orderDetails.md_info.address
                }}<span style="margin: 0 10px">/</span>电话：{{ orderDetails.md_info.mobile }}
                <template v-if="orderDetails.seller_comments">
                  <span></span>商家备注：{{ orderDetails.seller_comments }}
                </template>
                <template v-if="orderDetails.remark">
                  <span style="margin: 0 10px">/</span>买家留言：{{ orderDetails.remark }}
                </template>
              </a-col>
              <a-col span="3">
                <a-button type="link" @click="$emit('tableOperate', 'update_shop', scope)">[修改自提点]</a-button>
              </a-col>
            </a-row>
            <a-row
              class="row_footer"
              v-else
              :style="orderDetails.seller_comments || orderDetails.remark ? { lineHeight: '30px' } : {}"
            >
              <a-col span="20">
                收货人：{{ orderDetails.name }}<span style="margin: 0 10px">/</span>电话：{{ orderDetails.mobile
                }}<span style="margin: 0 10px">/</span>地址：<span v-if="orderDetails.address_data"
                  >{{ orderDetails.address_data.province || orderDetails.address }}{{ orderDetails.address_data.city
                  }}{{ orderDetails.address_data.district }}{{ orderDetails.address_data.detail }}</span
                >
                <template v-if="orderDetails.seller_comments">
                  <span style="margin: 0 10px">/</span>商家备注：{{ orderDetails.seller_comments }}
                </template>
                <template v-if="orderDetails.remark">
                  <span style="margin: 0 10px">/</span>买家留言：{{ orderDetails.remark }}
                </template>
              </a-col>
              <a-col span="3">
                <template v-if="orderDetails.md_id > 0">
                  <a-button type="link" @click="$emit('tableOperate', 'order_address', scope)" v-if="orderDetails.is_trans == 1">[修改地址]</a-button>
                </template>
                <template v-else>
                  <a-button type="link" @click="$emit('tableOperate', 'order_address', scope)">[修改地址]</a-button>
                </template>
              </a-col>
            </a-row>
          </div>
        </a-row>
      </template>
      <a-empty v-else :image="simpleImage" v-show="!pagaData.length" />
    </div>
  </div>
</template>

<script>
import { Empty } from 'ant-design-vue'
export default {
  props: {
    tableTh: {
      type: Array,
      default: () => [],
    },
    listData: {
      type: Array,
      default: [],
    },
    orderDetails: {
      type: Object,
      default: {},
    },
  },
  data() {
    return {
      reason: '',
    }
  },
  filters: {},
  computed: {},
  watch: {},
  beforeCreate() {
    this.simpleImage = Empty.PRESENTED_IMAGE_SIMPLE
  },
  created() {},
  mounted() {},
  updated() {},
  methods: {},
}
</script>

<style scoped lang="less">
.table-section {
  width: 100%;

  .table-th {
    width: 100%;
    background: #fafafa;
    color: rgba(0, 0, 0, 0.85);
    font-weight: 500;
    text-align: left;

    .ant-col {
      padding: 16px;
    }
  }

  .table-body {
    .row-top {
      display: flex;
      align-items: center;

      .ant-col {
        float: none;
        padding: 16px;
      }
      .ant-row {
        display: flex;
      }
    }
    .form-box {
      padding: 0 16px;
      .form-title{
        margin-bottom: 5px;
        font-weight: bold;
      }
      .form-item {
        display: flex;
        margin-bottom: 5px;
        span {
          width: 200px;
        }
      }
    }
    .row-down {
      border-bottom: 1px solid #e8e8e8;

      .row_footer{
        display: flex;
        align-items: center;
      }

      .ant-row {
        padding-left: 16px;
      }
    }
    .ant-row:hover {
      background: rgb(230, 247, 255);
    }
  }
}
</style>